<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>

  <script>

    /* 
    - then()总是返回一个新的promise
    - 新promise的结果状态由then指定的回调函数执行的结果决定
      - 抛出错误
      - 返回失败的promise
      - 返回成功的promise
      - 返回pending的promise
      - 返回其它任何值
    */
    new Promise((resolve, reject) =>  {
      // resolve(1)
      reject(2)
    }).then(
      value => {
        console.log('onResolved1', value)
      },
      reason => {
        console.log('onRejected1', reason)
        // - 抛出错误  ==> 失败, reason是抛出的错误
        // throw 3
        // - 返回失败的promise  ==> 失败, reason是返回的promise的reason
        // return Promise.reject(4)

        // - 返回成功的promise  ==> 成功, value是返回的promise的value
        // return Promise.resolve(5)
        // - 返回其它任何值  ==> 成功, value是返回的值
        // return 6      

        // - 返回pending的promise => pendding
        return new Promise(() => {})
      }
    ).then(
      value => {
        console.log('onResolved2', value)
      },
      reason => {
        console.log('onRejected2', reason)
      }
    )


   
   

    


    /* 
    Promise.all()
    */
    /* function ajax(url) {
      return axios.get(url)
    }
    const p1 = ajax(url1)
    const p2 = ajax(url2)
    const p3 = ajax(url3)
    Promise.all([p1, p2, p3])
      .then(
        responses => { // 得到包含3个成功数据的response的数组
          return ajax(url4)
        }
      ).then(response4 => {  // 第4个请求成功的回调

      }).catch(error => { // 只要有一个失败了

      }) */

    /* 
    1. 哪里用await: 一般在结果为promise的表达式左侧
        如果await 右侧表达式结果不是promise, 直接得到这个结果
    2. 如果用async: 离await最近的函数定义的左侧

    成功的value: await左侧以级下面的代码都是在成功之后执行(相当于在成功的回调中执行)
    失败的reason: 使用try...catch中在失败后执行(相当于在失败的回调中执行)

    调用async函数的得到是一个promise对象, promise的结果由aysnc函数体执行的结果决定(与.then类似)
     */

    // function ajax(url) {
    //   return axios.get(url)
    // }

    /* 
    async函数执行返回一个promise
    promse的状态由 async函数体执行的结果 决定
    */
    const getProduct =  async () => {
      try {
        const url = '/1_js基础/product.json'
        const response = await axios.get(url)
        const result = response.data
        console.log(result)
        return result
      } catch (error) {
        alert(error.message)
        return undefined
      }
    }

    function getProduct2() {
      const url = '/1_js基础/product.json'
      return axios.get(url).then(
        response => {
          const result = response.data
          console.log(result)
          return result
        },
        error => {
          alert(error.message)
          return undefined
        }
      )
    }

    async function test () {
      // getProduct().then(result => {
      //   console.log(result)
      // })

      const obj = await {m: 1}
      console.log(obj)
    }
    
    test()



  </script>
</body>
</html>